<template>
    <div class="main">
      <div class="table">
            <div class="chhead">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/managemain' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>课程修改</el-breadcrumb-item>
              </el-breadcrumb>
              <div class="input">
                <el-input
                v-model="search"  @click="handleEdit(scope.$index, scope.row)"
                size="mini"
                prefix-icon="el-icon-search"
                placeholder="输入关键字搜索" class="input" />
              </div>
            </div>
            <el-table
            :data="tableData.filter(data => !search || data.course.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column
                  label="ID"
                  prop="id">
            </el-table-column>
            <el-table-column
                  label="任课教师"
                  prop="user">
            </el-table-column>
            <el-table-column
                  label="课程名称"
                  prop="course">
            </el-table-column>
            <el-table-column
                label="上机地点"
                prop="laboratoryId">
            </el-table-column>
            <el-table-column
                label="上机周数"
                prop="week">
            </el-table-column>
            <el-table-column
                label="周几"
                prop="day">
            </el-table-column>
            <el-table-column
                label="节数"
                prop="section">
            </el-table-column>
            <el-table-column
                label="班级"
                prop="classId">
            </el-table-column>
            <el-table-column
              align="right">
              <template slot="header">
                  <el-tag type="success">课程修改功能模块</el-tag>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" type="warning" plain @click="dialogFormVisible = true">编辑</el-button>
                <el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                <el-dialog title="更改内容" :visible.sync="dialogFormVisible">
                  <el-form :model="form">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程名称" :label-width="formLabelWidth">
                      <el-input v-model="form.course" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="任课教师" :label-width="formLabelWidth">
                      <el-input v-model="form.user" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房号码" :label-width="formLabelWidth">
                      <el-input v-model="form.laboratoryId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="周数" :label-width="formLabelWidth">
                      <el-input v-model="form.week" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="周几" :label-width="formLabelWidth">
                      <el-input v-model="form.day" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="节数" :label-width="formLabelWidth">
                      <el-input v-model="form.section" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="班级" :label-width="formLabelWidth">
                      <el-input v-model="form.classId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="选择" :label-width="formLabelWidth">
                      <el-radio v-model="radio" label="1">增加</el-radio>
                      <el-radio v-model="radio" label="2">更改</el-radio>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      search: '',
      dialogFormVisible: false,
      form: {
        id: '',
        course: '',
        classId: '',
        user: '',
        week: '',
        day: '',
        section: '',
        laboratoryId: ''
      },
      formLabelWidth: '120px',
      radio: '1'
    }
  },
  async created () {
    await this.$http.get(
      '/arrange/findAll',
      { 'Content-Type': 'application/json' }
    ).then(res => {
      if (res.data.code === 200) {
        this.tableData = res.data.datas.AllArrange
      }
    })
    console.log(this.tableData)
  },
  methods: {
    use1 (index, row) {
      console.log(index, row)
    },
    submitForm () {
      this.tableData.push(this.form)
      console.log(this.form)
      this.dialogFormVisible = false
    },
    handleDelete (index, row) {
      this.tableData.splice(index, 1)
      console.log(this.tableData)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
